<template>
	<view class="">
		<movable-area class="movableArea">
			<movable-view class="movableView"
				:position="position"
				:x="x"
				:y="y"
				:direction="direction"
				:damping="damping"
				@change="onChange"
				@tap.stop="onTap"
				@touchend.stop="onTouchend">
				<view class="box">
					<view class="msg" v-if="imgType == 1">
						沁医AI助手
					</view>
					<image v-if="imgType == 1" src="@/static/images/ai/ai-icon.png" mode="widthFix" class="iconImage"></image>
					<image v-if="imgType == 2" src="@/static/images/ai/report-icon.png" mode="widthFix" class="iconImage"></image>
				</view>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				x: 0,
				y: 0,
				x1: 0,
				x2: 0,
				y1: 0,
				y2: 0,
				move: {
					x: 0,
					y: 0
				}
			};
		},
		props: {
			dictCode: {
				type: String,
				default: "00"
			},
			content: {
				type: String,
				default: ""
			},
			imgType: {
				type: Number,
				default: 1
			},
			damping: {
				type: Number,
				default: 10
			},
			direction: {
				type: String,
				default: "all"
			},
			position: {
				type: Number,
				default: 4
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.x1 = 0;
					this.x2 = parseInt(res.windowWidth) - 50;
					this.y1 = 0;
					this.y2 = parseInt(res.windowHeight) - 20;
					setTimeout(() => {
						if (this.position == 1 || this.position == 2) this.y = parseInt(this.y2 * 0.2);
						if (this.position == 3 || this.position == 4) this.y = parseInt(this.y2 * 0.8);
						if (this.position == 1 || this.position == 3) this.x = parseInt(this.x1);
						if (this.position == 2 || this.position == 4) this.x = parseInt(this.x2);
						this.move.x = this.x;
						this.move.y = this.y;
					}, 1000)
				}
			})
		},
		methods: {
			// 将文本转换为 base64
			encodeToBase64(value) {
				return btoa(encodeURIComponent(value));
			},
			onChange(e) {
				if (e.detail.source === "touch") {
					this.move.x = e.detail.x;
					this.move.y = e.detail.y;
				}
			},
			onTap(e) {
				var content = this.encodeToBase64(this.content);
				uni.navigateTo({
					url: '/pages/mine/aiBox/index?content='+content+'&dictCode='+this.dictCode
				})
				// 在这里处理单击事件的逻辑
				// 例如打开链接、执行动作等
			},
			onTouchend() {
				this.x = this.move.x;
				this.y = this.move.y;
				setTimeout(() => {
					if (this.move.x < this.x2 / 2) this.x = this.x1;
					else this.x = this.x2;
					console.log("yuan" + this.x, this.y)
				}, 100)
			},
			onLoad: function(e) {
			
			}
		},
	};
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		
	}

	.movableArea {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 999;
	}

	.movableView {
		pointer-events: auto;
		min-width: 80px;
		min-height: 80px;
		.box{
			width: 100%;
			height: 80px;
			text-align: center;
			position: relative;
			.msg{
				width: 100%;
				position: absolute;
				left: 0;
				bottom: 10px;
				color: #fff;
				background: #4C83E0;
				padding: 4px 4px;
				border-radius: 20px;
				text-align: center;
				font-size: 10px;
				margin-top: -10px;
				z-index: 100;
			}
		}
		
	}

	.iconImage {
		display: block;
		width: 60px;
		height: 60px;
		margin: 0 auto;
		z-index: 10;
	}

	.contact {
		width: 50px;
		height: 50px;
		overflow: hidden;
		position: absolute;
		left: 0px;
		top: 0px;
		border-radius: 100%;
		opacity: 0;
	}
</style>
